【Flutter】ListView、GridView高度自适应并随页面滚动 |
您所在的位置：网站首页 › Flutter gridview 高度自动 › 【Flutter】ListView、GridView高度自适应并随页面滚动 |
|
首先需要一个滚动页面
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Wrap(
children: [
],
),
),
),
);
按照文档编写ListView和GridView
class Lists extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
ListTile(
title: Text(
"我是列表第一项",
style: TextStyle(color: Colors.red),
),
),
ListTile(
title: Text(
"我是列表第二项",
style: TextStyle(color: Colors.yellow),
),
),
ListTile(
title: Text(
"我是列表第三项",
style: TextStyle(color: Colors.blue),
),
)
],
);
}
}
class GridViews extends StatelessWidget {
List _getList() {
List list = new List();
for (var i = 0; i < 20; i++) {
list.add(Container(
alignment: Alignment.center,
color: Colors.blue.shade50,
child: Text(
"第${i + 1}条数据",
style: TextStyle(color: Colors.red, fontSize: 20),
),
));
}
return list;
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 5, //垂直间距
crossAxisSpacing: 10, //水平间距
padding: EdgeInsets.all(10),
childAspectRatio: 2, //宽高比例
children: _getList(),
);
}
}
把ListView和GridView引入页面
body: SingleChildScrollView(
child: Center(
child: Wrap(
children: [
Lists(),
GridViews(),
],
),
),
),
保存，恭喜你，喜提报错
Cannot hit test a render box that has never been laid out. 当ListView、GridView作为Wrap、Column等组件的子组件时，若外部没有设置高度，则会产生此报错。 若需求高度能够自适应解决放案：为ListView、GridView设置属性 shrinkWrap: true, return GridView.count( crossAxisCount: 3, mainAxisSpacing: 5, //垂直间距 crossAxisSpacing: 10, //水平间距 padding: EdgeInsets.all(10), childAspectRatio: 2, //宽高比例 shrinkWrap: true, children: _getList(), );刷新后，报错消失，但是发现其只可内部滚动。 若要使其更随外部页面整体滚动，为其设置属性：physics: NeverScrollableScrollPhysics(), return GridView.count( crossAxisCount: 3, mainAxisSpacing: 5, //垂直间距 crossAxisSpacing: 10, //水平间距 padding: EdgeInsets.all(10), childAspectRatio: 2, //宽高比例 shrinkWrap: true, physics: NeverScrollableScrollPhysics(), children: _getList(), );至此，需求达成。 参考https://www.jianshu.com/p/60abecfdc51d |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |